<template>
  <div class="container flex content">
    <div class="left">
      <Card title="申请认证">
        <el-form ref="form" :model="form" :rules="rules" v-loading="loading">
          <el-form-item label="认证描述" prop="description">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="认证材料" prop="material">
            <el-input v-model="form.material">
              <Upload slot="append" @success="uploadSuccess"></Upload>
            </el-input>
          </el-form-item>
          <el-form-item label="申请状态" v-if="isWait">
            <span v-html="status"></span>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="loading" type="primary" @click="submit" v-text="form.id?'修改申请':'提交申请'"></el-button>
            <el-button v-if="isWait" type="danger" @click="cancel()">取消申请</el-button>
          </el-form-item>
        </el-form>
      </Card>
    </div>
    <div class="right">
      <Card title="申请认证">
        <h3>申请工作认证：</h3>
        <p>1. 需要提供工作证明</p>
        <p>2. 填写职位</p>

        <h3>申请实名认证：</h3>
        <p>1. 需要提供身份证正反面复印件</p>
        <p>2. 填写真实姓名</p>

        <h3>申请站长认证：</h3>
        <p>1. 需要备案截图</p>
        <p>2. 填写认证描述，例如：XX站长</p>
      </Card>
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";
import api from "@/utils/api";
import utils from "@/utils/utils";

export default {
  name: "verify",
  layout: 'base',
  middleware: 'auth',
  data() {
    return {
      loading: false,
      form: {
        description: '',
        material: '',
        status: 0,
        id: null
      },
      rules: {
        description: [
          {required: true, message: '请输入认证描述', trigger: 'blur'},
        ],
        material: [
          {required: true, message: '请输入认证材料', trigger: 'blur'},
        ]
      }
    }
  },
  computed: {
    isAuth() {
      return typeof (this.$store.state.user) !== 'undefined';
    },
    isWait() {
      return this.form.id != null;
    },
    status() {
      if (typeof (this.form.status) !== 'undefined') {
        return {
          0: '待审核',
          1: '通过',
          2: '请重新提交资料'
        }[this.form.status];
      }

      return "";
    }
  },
  methods: {
    uploadSuccess(url) {
      this.form.material = url;
    },
    cancel() {
      this.$confirm('确定取消申请？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let self = this;
        this.loading = true;
        api.userVerifyCancel().then(res => {
          utils.showMessage(res);
          if (res.code === 1) {
            self.getVerify();
          }
        });
      }).finally(() => this.loading = false);
    },
    submit() {
      let self = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          api.userVerifyApply(self.form.id, self.form.description, self.form.material).then(res => {
            self.form.id = res.id;
            self.$message.success('申请成功，等待审核！');
          }).finally(() => self.loading = false);
        } else {
          this.$message.error('请检查表单');
        }
      })
    },
    getVerify() {
      let self = this;
      api.getUserVerifyDetail().then(data => {
        self.form.description = data.description;
        self.form.material = data.material;
        self.form.id = data.id;
        self.form.status = data.status;
      });
    }
  },
  created() {
    if (this.isAuth) {
      this.getVerify();
    }
  },
  head() {
    return {
      title: '申请认证-' + config.site.name
    }
  }
}
</script>

<style scoped lang="less">

</style>
